<!-- 在App.vue总要写三个标签，template负责html，script负责js，style负责样式 -->
<template>
  <div class="person">
    <h1>name: {{ person.name }}</h1>
    <h2>age: {{ person.age }}</h2>
    <h3>car: {{ person.car.c1 }} and {{ person.car.c2 }}</h3>
    <button @click="changename">修改费对象类型</button>
    <button @click="changecar">修改对象类型</button>
  </div>
</template>


<script>//加上setup就是语法糖，自动返回，但是组件名要另外写，通过name属性来设置
import { reactive, ref, toRef, toRefs, watch } from 'vue'
//js
  export default {
    name: 'Preson',
    setup() {
      let person = reactive({
        name: 'zhangsan',
        age: 18,
        car: {
          c1: 'baoma',
          c2: 'benci'
        }
      })

      function changename() {
        person.name += '-'
      }

      function changecar() {
        person.car.c1 = 'falali'
      }

      watch([() => person.name, () => person.car.c1], (newValue, oldValue) => {
        console.log(newValue, oldValue)
      })
      return {person, changename, changecar}
    }
  }
</script>


<style scoped> 
  .person {
    width: 100%;
    height: 100%;
    background-color: pink;
  }
</style>
